<template>
  <view class="container">
    <view class="header"> </view>
    <view class="content">
      <view class="order-box">
        <image src="/static/images/order/icon_making.png" class="status-icon" />
        <view class="text-color-primary font-size-lg font-weight-bold mb-10">
          <template v-if="order.state == 0"> 订单未完成 </template>
          <template v-if="order.state == 1"> 订单已支付 </template>
          <template v-if="order.state == 2"> 订单已完成 </template>
        </view>
        <view class="" v-if="order.state == 1">
          <view class="text-color-assist font-size-sm">感谢您的支持，欢迎再次光临</view>
          <view class="text-color-assist font-size-sm mt-2">取餐码：{{ order.yzcode }}</view>
        </view>
      </view>
      <view class="flex-fill" style="background-color: #ffffff !important">
        <view class="order-info">
          <list-cell line-right bgcolor="#FFFFFF">
            <view class=""> 订单类型：堂食<br /> </view>
          </list-cell>
          <list-cell line-right bgcolor="#FFFFFF">
            <view>
              <span>桌号：{{ order.userAddress }}号桌</span>
            </view>
          </list-cell>

          <list-cell padding="0 40rpx" line-right bgcolor="#FFFFFF">
            <view class="w-100 d-flex flex-column">
              <view class="d-flex align-items-center mt-40">
                <view class="flex-fill d-flex flex-column">
                  <view class="font-size-base mb-10">{{ order.productName }}</view>
                  <image :src="order.productImage" class="img"></image>
                  <view class="font-size-extra-sm text-color-assist">
                  </view>
                </view>
                <view class="flex-shrink-0 font-weight-bold ml-40">x{{ order.totalNum }}</view>
                <view class="flex-shrink-0 font-weight-bold ml-40">￥{{ order.totalPrice }}</view>
              </view>
              <view class="d-flex justify-content-between align-items-center mt-40 pb-30 border-dashed">
                <view>商品总价</view>
                <view>￥{{ order.totalPrice }}</view>
              </view>
              <view class="d-flex justify-content-between align-items-center font-size-lg font-weight-bold mt-30 mb-40">
                <view>合计</view>
                <view>￥{{ order.totalPrice }}</view>
              </view>
            </view>
          </list-cell>
          <list-cell padding="30rpx 40rpx" last bgcolor="#FFFFFF" style="border-radius: 0 0 30rpx 30rpx">
            <view class="w-100 d-flex flex-column font-size-extra-sm text-color-assist">
              <view class="mb-10">下单时间：{{ order.createTime }}</view>
              <view class="mb-10">订单编号：{{ order.orderId }}</view>
              <view class="mb-10">备注信息：{{ order.remark }}</view>
            </view>
          </list-cell>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import listCell from "@/components/list-cell/list-cell.vue";
import { orderDetail } from "@/api"

export default {
  components: {
    listCell,
  },
  data() {
    return {
      order: {},
      order_id: ""
    };
  },
  computed: {},
  async onLoad(options) {
    this.order_id = options.id
    this.getData()
  },
  methods: {
    async getData() {
      let res = await orderDetail({ id: this.order_id })
      if (res.code == 200) {
        console.log('res', res)
        this.order = res.data
      }
    },
    // 拨打电话
    call(number) {
      uni.makePhoneCall({
        phoneNumber: number,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 44px);
  background-color: #eaeaea;
  padding: 0 40rpx;
  // display: flex;
  // flex-direction: column;
  overflow: auto;
}

.header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20rpx 0;

  .service-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem !important;
    font-size: $font-size-sm;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 20rpx;
    }
  }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .order-box {
    z-index: 10;
    height: 25vh;
    border-radius: 30rpx 30rpx 0 0;
    box-shadow: 0 0 2px 0 rgba($color: #333, $alpha: 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: $bg-color-white;
    flex-shrink: 0;

    .status-icon {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 30rpx;
    }
  }
}

.phone-icon,
.map-icon {
  width: 64rpx;
  height: 64rpx;
}

.phone-icon {
  margin-right: 40rpx;
}

.border-dashed {
  border-bottom: 1rpx dashed $border-color;
}

.order-info {
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
  margin-bottom: 30rpx;
}

.order-invoice {
  padding: 30rpx 40rpx;
  border-radius: 30rpx;
  box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
  margin-bottom: 60rpx;
  background-color: #f6f6f6;
}

.img {
  width: 100rpx;
  height: 80rpx;
}

.jump-icon {
  width: 24rpx;
  height: 48rpx;
  margin-left: 20rpx;
}

.mt-2 {
  margin-top: 20rpx;
}
</style>
